<template>
  <div class="role h-full px-4 py-3 rounded-lg">
    <!-- <div class="role-nav flex">
      <div
        @click="curIndex = index"
        :class="curIndex === index ? 'active' : ''"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div> -->
    <div class="role-content">
      <div class="search-form role-from">
        <div>
          <a-button
            @click="openEditModal(false)"
            class="ghost"
            v-permission="'/systemConfig/role/role-add'"
          >
            添加角色
          </a-button>
        </div>
        <div class="right">
          <a-input
            v-model:value.trim="role"
            placeholder="请输入角色名称"
            v-filter-special-chars
          />
          <!-- <a-button @click="getRole(true, true)" type="submit" class="search">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="resetData" type="submit" class="refresh">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button> -->
          <SerchButtom @search="getRole(true, true)" @reset="resetData" />
        </div>
      </div>
      <div class="common-table">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="false"
          :loading="loading"
        >
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.dataIndex === 'operation'">
              <div class="flex justify-center text-button-area">
                <a-button
                  v-if="record.admin"
                  class="common-text-button"
                  type="link"
                  @click="openEditModal(record, 'show')"
                  >查看</a-button
                >
                <a-button
                  v-if="!record.admin"
                  @click="openEditModal(record)"
                  type="link"
                  class="common-text-button"
                  v-permission="'/systemConfig/role/role-edit'"
                >
                  修改
                </a-button>
                <!-- <a-button
                  v-if="!record.admin && record.roleName !== '审核员'"
                  @click="deleteRole(record)"
                  type="link"
                  class="delete"
                  v-permission="'/systemConfig/role/role-delete'"
                  >删除</a-button
                > -->
                <a-button
                  v-if="!record.admin"
                  @click="deleteRole(record)"
                  type="link"
                  class="delete"
                >
                  删除
                </a-button>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'order'">
              {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
            </template>
          </template>
        </a-table>
      </div>
      <div class="common-pagination">
        <Pagination @getListByPage="getListByPage" ref="paginationRef" />
      </div>
    </div>
  </div>
  <role-modal
    ref="editRoleModal"
    :menuList="menuList"
    :modalType="modalType"
    @isOk="getRole"
    :isAdmin="isAdmin"
  />
</template>

<script lang="ts" setup>
import { getMenu, getRoleList } from '@/api/role'
import { onMounted, reactive, ref } from 'vue'
import RoleModal from './RoleModal.vue'
import type { Menu, Role } from '@/api/model/role'
import { hasPermission } from '@/utils/permession'
import Pagination from '@/components/pagination/index.vue'
// import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'

import SerchButtom from '@/components/YuanQi-SearchButtom.vue'

let roleClone = ''
const role = ref()
const dataSource = ref()
const loading = ref<boolean>(false)
const isAdmin = ref<boolean>(false)
// const curIndex = ref(0)
// const navList = [
//   {
//     name: '角色权限配置'
//   }
// ]
const columns = ref([
  {
    title: '序号',
    dataIndex: 'order',
    width: '7.5rem'
  },
  {
    title: '角色名称',
    dataIndex: 'roleName',
    key: 'roleName',
    ellipsis: true
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    ellipsis: true,
    width: 120
  }
])

const resetData = () => {
  role.value = ''
  getRole(true, true)
}

const pagination = reactive({
  total: 0,
  pageSize: 10, // 每页中显示10条数据
  position: ['bottomCenter'],
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`
})

const paginationRef = ref()
const getListByPage = (page: number, pageSize: number) => {
  if (pagination.current !== page) {
    pagination.current = page
    getRole()
  }
  if (pagination.pageSize !== pageSize) {
    pagination.pageSize = pageSize
    getRole(true)
  }
}

const getRole = (flag = false, isSearch = false) => {
  if (flag) {
    pagination.current = 1
    paginationRef.value.changeCurrent(pagination.current)
  }
  loading.value = true
  dataSource.value = []
  const params = {
    roleName: role.value,
    pageNum: pagination.current,
    pageSize: pagination.pageSize
  }
  if (isSearch) {
    roleClone = role.value
  } else {
    params.roleName = roleClone
  }
  getRoleList(params)
    .then((res) => {
      if (res) {
        if (res.list.length === 0 && pagination.current > 1) {
          pagination.current = pagination.current - 1
          paginationRef.value.changeCurrent(pagination.current)
          getRole()
          return
        }
        dataSource.value = res.list
        pagination.total = res.total
        paginationRef.value.changeTotal(pagination.total)
        loading.value = false
      } else {
        loading.value = false
      }
    })
    .catch(() => {
      loading.value = false
    })
}

const menuList = ref<Menu[]>([])
const getMenuList = () => {
  getMenu().then((res) => {
    if (res) {
      menuList.value = res
      // 遍历menuList, 添加isLeaf属性
      addLeaf(menuList.value)
      console.log(menuList.value)
    }
  })
}

const addLeaf = (arr: Menu[]) => {
  arr.forEach((item: Menu) => {
    if (item.children) {
      addLeaf(item.children)
      item.isLeaf = false
    } else {
      item.isLeaf = true
    }
  })
}

onMounted(() => {
  getRole(true, true)
  getMenuList()
  const flag =
    hasPermissionFun('/systemConfig/role/role-edit') ||
    hasPermissionFun('/systemConfig/role/role-delete')
  if (!flag) {
    columns.value.pop()
  }
})

const hasPermissionFun = (path: string) => {
  return hasPermission(path)
}

const openEditModal = (data: Role | false, tag?: string) => {
  data ? (modalType.value = 'edit') : (modalType.value = 'add')
  if (tag && tag === 'show') {
    isAdmin.value = true
    modalType.value = 'see'
  } else {
    isAdmin.value = false
  }
  editRoleModal.value.showModal(data)
}

const deleteRole = (data: Role) => {
  modalType.value = 'delete'
  isAdmin.value = false
  editRoleModal.value.showModal(data)
}

// 模态框
type ModalType = 'delete' | 'edit' | 'add' | 'see'
const modalType = ref<ModalType>('delete')
const editRoleModal = ref()
</script>

<style lang="less" scoped>
/* stylelint-disable-next-line string-quotes */
@import './index.less';
</style>
